<template>
  <div class="pipeline-config-empty">
    <img :src="noFlow" alt="" :width="170" :height="150" />
    <div class="empty-text">{{ text }}</div>
    <a-button type="primary" class="add-task" @click="handleClick" v-if="!isView">
      <template #icon>
        <PlusOutlined v-if="showIcon" />
      </template>
      {{ btnText }}
    </a-button>
  </div>
</template>
<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import noFlow from '@/assets/images/no-flow.png';
const emit = defineEmits(['onClick']);
defineProps({
  isView: {
    type: Boolean,
    default: false,
  },
  text: {
    type: String,
    required: true,
  },
  btnText: {
    type: String,
    required: true,
  },
  showIcon: {
    type: Boolean,
    default: true,
  },
});
const handleClick = () => {
  emit('onClick');
};
</script>
<style scoped lang="less">
.pipeline-config-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #f3f7fb;
  position: relative;
  .empty-text {
    margin-top: 14px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0;
    font-weight: 400;
  }
  .add-task {
    margin-top: 32px;
    width: 150px;
    border-radius: 4px;
    height: 40px;
  }
}
</style>
